<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<% pageContext.setAttribute("newLine", "\r\n"); %>
<!DOCTYPE HTML>
<html>
<head>
	<title>Recipese | <c:out value="${recipe.name}" /></title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
	
	<!-- See http://blog.jqueryui.com/2011/02/jquery-ui-1-8-10/ for more jquery ui theme links  -->
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet" />
	
	<link href="/css/styles.css" type="text/css" rel="stylesheet" />
</head>
<body>


<div>
	<h1 class="fn"><c:out value="${recipe.name}" /></h1>
	<div class="full-screen">
		<div class="row">
			<div class="right-column">
				<h2>Ingredients</h2>
				<ul>
					<c:forEach var="ingredient" items="${recipe.ingredients}">
						<li class="ingredient"><c:out value="${ingredient.text}" /></li>
					</c:forEach>
				</ul>
			</div>
			<div class="left-column">
				<h2>Instructions</h2>
				<c:forEach var="line" items="${fn:split(recipe.instructions, newLine)}">
					<c:if test="${!empty line}">
						<p class="instructions">
						<c:out value="${line}" />
						</p>	
					</c:if>
				</c:forEach>
			</div>
		</div>
	</div>
	<div class="link">
		<c:if test="${!empty recipe.url}">
		Based on: <a href="<c:out value="${recipe.url}" />"><c:out value="${recipe.url}" /></a>
		</c:if>
	</div>
</div>


</body>
</html>